<template>
  <div style="width: 100%; height: 100%; min-height: 300px;">
    <!-- 按钮区域 -->
    <div class="button-area">
      <el-button
        type="primary"
        size="small"
        :icon="Plus"
        @click="handleAddCard"
      >
        {{ t('datacenter.iotdataPage.addCard') }}
      </el-button>

      <!-- 列数选择改为下拉菜单 -->
      <el-dropdown class="dropdown-control" trigger="click">
        <span class="el-dropdown-link">
          <el-button type="primary" size="small" :icon="Grid">
            {{ columnCount }}{{t('buttons.columns')}}
          </el-button>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="columnCount = 1">1{{t('buttons.columns')}}</el-dropdown-item>
            <el-dropdown-item @click="columnCount = 2">2{{t('buttons.columns')}}</el-dropdown-item>
            <el-dropdown-item @click="columnCount = 3">3{{t('buttons.columns')}}</el-dropdown-item>
            <el-dropdown-item @click="columnCount = 4">4{{t('buttons.columns')}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 物联网参数数据实时变化区域 -->
    <div
      class="cards-container"
      :style="{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }"
    >
      <WaveBox
        v-for="(card, index) in cards"
        :key="card.id"
        :product-key="props.params.productKey"
        :deviceOptions="props.deviceOptions"
        :index="index"
        @onRemove="handleRemoveCard"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ElButton, ElMessageBox, ElMessage } from 'element-plus';
import { Plus, Grid, Refresh, VideoPause, VideoPlay, Delete } from '@element-plus/icons-vue';
import WaveBox from '@/views/components/aewave/wavebox.vue'
import { useI18n } from 'vue-i18n';

const props = defineProps({
  params: {
    type: Object,
    required: true,
    default: {
      deptId: 0,
      productId: undefined,
      productKey: undefined,
      deviceGroupId: undefined,
      deviceNos:[],
      page:1,
      pageSize:500,
      timeType: 0 ,  // 0时间段 1最近时间
      timeRange: [],
      recent: 60,
      distributeTableId: undefined,
    },
  },
  deviceOptions: {
    type: Array,
    required: false,
    default: [],
  }
});

const { t } = useI18n();
watch(
  () => props.params,
  (newParams) => {
  },
  { immediate: true }
);

const columnCount = ref(2);
const cards = ref<{ id: number }[]>([]);
let cardIdCounter = 1;

// 新增卡片按钮点击事件
const handleAddCard = () => {
  cards.value.push({ id: cardIdCounter++ });
  ElMessage({
      type: 'success',
      message: t('datacenter.iotdataPage.cardAdded')
    });
};
onMounted(() => {
  // 生成X轴数据
});

onUnmounted(() => {

});

// 添加移除卡片的方法
const handleRemoveCard = (index: number) => {
  // 从数组中移除卡片
  cards.value.splice(index, 1);
  ElMessage({
      type: 'success',
      message: t('datacenter.iotdataPage.cardRemoved')
    });
};
</script>

<style scoped lang="scss">
.button-area {
  display: flex;
  margin-bottom: 16px;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.cards-container {
  display: grid;
  gap: 20px;
}

.data-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-title {
  font-weight: bold;
}

.card-actions {
  display: flex;
  gap: 5px;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 250px;
}

.placeholder-content {
  text-align: center;
  padding: 20px;
  color: #606266;
}
</style>
